<!--
 * @Author: your name
 * @Date: 2021-02-04 14:44:02
 * @LastEditTime: 2021-02-26 13:10:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \myproject\src\views\Home\index.vue
-->
<template>
  <div class="home-container">
    <!-- 搜索区域 -->
    <van-nav-bar fixed>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          class="search-btn"
          round
          size="small"
          icon="search"
          @click="$router.push('/SearchIndex')"
        >
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <!-- 频道列表区域 -->
    <van-tabs v-model="activeIndex">
      <van-tab v-for="item in channelsList"
      :title="item.name" :key="item.id">
        <!-- <div class="scroll-wrapper">
          <p>{{item.name}}</p>
        </div> -->
        <article-list :channel="item"></article-list>
      </van-tab>
    </van-tabs>
 <!-- 准备点击按钮 -->
    <div class="bar-btn" @click="showActionSheet=true">
      <van-icon name="wap-nav"/>
    </div>
<van-action-sheet v-model="showActionSheet" get-container="body">
  <!-- 封装组件 -->
  <channel-edit :my-channel-list="channelsList"
@my-chanel-click ="myChanelClick"
  ></channel-edit>
</van-action-sheet>
  </div>
</template>

<script>
import { getChannels } from '@/api/channel.js'
import ChannelEdit from './ChannelEdit.vue'
import ArticleList from '@/views/Home/ArticleList.vue'

export default {
  name: 'home',
  components: {
    ArticleList, ChannelEdit
  },
  data () {
    return {
      channelsList: [],
      showActionSheet: false,
      activeIndex: null
    }
  },
  mounted () {
    this.hgetChannels()
  },
  methods: {
    myChanelClick (index) {
      this.activeIndex = index
      this.showActionSheet = false
    },
    async hgetChannels () {
      const res = await getChannels()
      // console.log(res.data.data.channels)
      this.channelsList = res.data.data.channels
    }
  }
}
</script>

<style lang="less" scoped>
.home-container {
  .logo {
    background: url("./image/logo.png") no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  // 搜索按钮
  .search-btn {
    background-color: #5babfb;
    width: 80px;
  }
  /deep/.van-tabs{
    position: fixed;
    top: 46px;
    width: 100%;
  }
  // 滑块下划线颜色
  /deep/.van-tabs__line {
    background-color: #3196fa;
  }
  // 专门为文章列表区域腾出一块空间
  /deep/.van-tabs__content {
    position: fixed;
    top: 96px;
    bottom: 50px;
    width: 100%;
    overflow: auto;
  }
}
 // 为更多按钮让出位置
  /deep/.van-tabs__nav{
    width:calc(100vw - 40px);
  }
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index: 1;
    .van-icon-wap-nav {
      font-size: 20px;
    }
  }
</style>
